import Vue from 'vue';
import modalVue from './main.vue';

const ModalVueConstructor = Vue.extend(modalVue);
let instance;
const initInstance = () => {
    instance = new ModalVueConstructor({
        el: document.createElement('div')
    });
};

const removeModal = () => {
    document.body.removeChild(instance.$el); 
}

const showModal = (imgData) => {
    if (!instance) {
        initInstance();
    }
    instance.visible = true;
    instance.imgData = imgData;
    instance.removeModal = removeModal;
    document.body.appendChild(instance.$el);
}

const ModalBox = function (imgData) {
    showModal(imgData)
}

ModalBox.show = (imgData) => {
    showModal(imgData)
};

ModalBox.colose = () => {
    if (instance) {
        instance.close();
    }
};

Vue.component('ModalBox', ModalBox);
Vue.prototype.$ModalBox = ModalBox;

export default ModalBox

export {
    ModalBox
};